import React,{ Component } from 'react'
import { Breadcrumb,Row,Col } from 'antd'
import { return_dir } from '../../actions/disk'

class Crumb extends Component {

  handleonClick = (e) => {
    if (this.props._DirStack[this.props._DirStack.length-1].directory !== e.target.id) {
      this.props.dispatch(return_dir(this.props.dispatch,this.props._DirStack,e.target.id))
    }
  }

  render(){
    const loop = data => data.map((item) => {
      return <Breadcrumb.Item href="#" onClick={this.handleonClick} id={item.directory} key={item.directory}>{item.tag}</Breadcrumb.Item>
    })
    return (
      <Row>
      <Col span={1}>
      </Col>
      <Col>
      <Breadcrumb separator="->">
      {loop(this.props._DirStack)}
      </Breadcrumb>
      </Col>
      </Row>
    )
  }
}

export default Crumb
